<template>
  <layout bg-color="#fff">
    <view class="page-container">
      <view class="home-header">
        <view class="home-title"> WELCOME </view>
        <view class="home-discript"> 欢迎来到防伪查询系统 </view>
        <view class="home-discript" style="color: #4b5563; font-size: 24rpx"> 这是一个高效、准确、便携的防伪溯源平台 </view>
      </view>

      <view class="home-buttons">
        <u-button type="primary" :plain="true" text="开始查验" @click="handleRouterToCheck"></u-button>
        <u-button type="primary" text="登录注册" @click="handleRouterToLogin"></u-button>
      </view>
    </view>
  </layout>
</template>

<script>
const {miniProgram} = wx.getAccountInfoSync()
const deviceInfo = wx.getDeviceInfo()
export default {
  name: "home",
  data() {
    return {}
  },
  computed: {
    platform() {
      return this.$store.state.configs.platform
    },
    developEnv() {
      return miniProgram.envVersion === "develop" || miniProgram.envVersion === "trial"
    }
  },
  created() {},
  methods: {
    handleRouterToCheck() {
      console.log("platform", this.platform)
      const brand = `${deviceInfo.brand}${deviceInfo.model}`
      switch (this.platform) {
        // case 'ios':
        //   uni.navigateTo({
        //     url: `/pages/checkH5/index?brand=${brand}&system=ios&source=check&debug=${this.developEnv}&time=${Date.now()}`
        //   })
        //   break
        // case 'android':
        //   uni.navigateTo({
        //     url: `/pages/checkH5/index?brand=${brand}&system=android&source=check&debug=${this.developEnv}&time=${Date.now()}`
        //   })
        //   break
        // default:
        //   uni.navigateTo({
        //     url: `/pages/checkH5/index?brand=${brand}&source=check&debug=${this.developEnv}&time=${Date.now()}`
        //   })
        //   break
        default:
          uni.navigateTo({
            url: `/pages/check/index`
          })
          break
      }
    },
    handleRouterToLogin() {
      uni.navigateTo({
        url: "/pages/login/index"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  padding: 50% 10% 0;
  display: flex;
  flex-direction: column;
  gap: 10%;
  text-align: center;

  .home-header {
    display: flex;
    flex-direction: column;
    color: #000;
  }

  .home-title {
    margin-bottom: 60rpx;
    font-size: 48rpx;
    font-weight: 600;
  }

  .home-discript {
    margin-bottom: 30rpx;
    font-size: 32rpx;
  }
}

.home-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10%;

  button {
    width: 35%;
  }
}
</style>
